import React, { Component } from 'react'
import 'antd/dist/antd.css'
import { Button } from 'antd'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../../actions/index'

class Add extends Component {

    state = {
        Name: '',
        City: '',
        Title: '',
        Id: ''
    }

    changeData(name, value) {
        this.setState({
            [name]: value
        })
    }

    addBtn() {
        let obj = {
            name: this.state.Name,
            city: this.state.City,
            title: this.state.Title,
            id: new Date().getTime()
        }

        this.props.add_Btn(obj)
    }

    render() {
        let { Name, City, Title } = this.state
        return (
            <div className='Add'>
                <p>
                    店铺名称：<input value={Name} onChange={e => { this.changeData('Name', e.target.value) }} />
                </p>
                <p>
                    店铺地址：<input value={City} onChange={e => { this.changeData('City', e.target.value) }} />
                </p>
                <p>
                    店铺介绍：<input value={Title} onChange={e => { this.changeData('Title', e.target.value) }} />
                </p>
                <p>
                    <Button onClick={
                        this.addBtn.bind(this)
                    }>添加</Button>
                    <Button>取消</Button>
                </p>
            </div>
        )
    }
}

let mapStateToProps = ({ homeReducer }) => {
    return {
        ...homeReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Add)